<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Selects</title>

        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>

    <body >

        <select id='demo1'></select>
        <select id='demo2'></select>
        <select id='demo3'></select>
        <select id='demo4'></select>
        <select id='demo5'></select>

        <script src="Selects.js" type="text/javascript"></script>
        <script type="text/javascript">
            function toInt(string) {
                return isNaN(parseInt(string)) ? 0 : parseInt(string);
            }
            var children = function (keys, callback) {
                var key = toInt(keys[keys.length - 1]);

                $.ajax({
                    url: 'https://tools.wtcxlw.com/area/children/code/' + key,
                    dataType: 'json',
                    success: function (rows) {
                        var data = {};
                        for (var i = 0; i < rows.length; i++) {
                            var a = rows[i];
                            data[rows[i].code] = {text: rows[i].name};
                        }
                        callback(data);
                    }
                });
            };

            new Selects({
                selects: ['#demo1', '#demo2', '#demo3', '#demo4', '#demo5'],
                placeholders: ['——省——', '——市——', '——县——', '——镇——', '——村——'],
                defaults: ['360000000000', '360700000000', '360702000000', '360702102000', '360702102004'],
                fnData: children,
                callback: function (data) {
                    console.log(data);
                }
            });

        </script>
    </body>

</html>
